<template>
  <div class="login-content">
    <div class="suncnui-carousel" id="banner-content">
      <a-carousel effect="fade" :autoplay="true" :dots="false">
        <div class="item item1"></div>
        <div class="item item2"></div>
      </a-carousel>
    </div>
    <div class="logo">
      <img src="../../assets/images/login/login-ico.png" alt="" id="des" />
    </div>
    <div class="word-desc">
      <div class="dot"></div>
      <div class="desc">万里长城是一道高大、坚固而连绵不断的长垣</div>
    </div>
    <div class="login-div">
      <div class="login-tilte">
        <img src="../../assets/images/login/emblem-ico.png" alt="" />
        <h2>欢迎来到政协直通车</h2>
      </div>
      <div class="login-from-content">
        <div class="login-tab">
          <a-tabs v-model="tabKey" @change="callback" :animated="false">
            <a-tab-pane key="1" tab="账号登录">
              <div class="login-form-item">
                <label>
                  <span>
                    <i class="suncnui suncnui-icon-zhanghao00"></i>
                  </span>
                </label>
                <input
                  class="suncnui-input"
                  type="text"
                  placeholder="请输入账号"
                  v-model="loginName"
                />
              </div>
              <div class="login-form-item">
                <label>
                  <span>
                    <i class="suncnui suncnui-icon-mima00"></i>
                  </span>
                </label>
                <input
                  class="suncnui-input"
                  type="password"
                  placeholder="请输入密码"
                  v-model="password"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="手机快捷登录">
              <div class="login-form-item clear">
                <label>
                  <span>
                    <i class="suncnui suncnui-icon-shouji1"></i>
                  </span>
                </label>
                <div
                  class="inline-block area-code"
                  @click="isShowAreaCode = !isShowAreaCode"
                >
                  <span id="area-span">{{ areaNumber }}</span>
                  <i class="suncnui suncnui-icon-jiantou"></i>
                </div>
                <input
                  style="padding-left: 115px"
                  class="suncnui-input"
                  type="text"
                  placeholder="请输入账号"
                />
              </div>
              <div class="login-form-item clear">
                <label>
                  <span>
                    <i class="suncnui suncnui-icon-yanzhengma"></i>
                  </span>
                </label>
                <input
                  style="width: 65%"
                  class="suncnui-input"
                  type="text"
                  placeholder="请输入验证码"
                />
                <div class="verification-code">
                  <span> 获取验证码 </span>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="扫码登录">
              <div class="dimensional-code">
                <img src="../../assets/images/login/code-ico.jpg" alt="" />
              </div>
              <div class="dimensional-tip">
                <i class="suncnui suncnui-icon-saoyisao"></i>
                <div class="tip">
                  <p>打开履职掌中宝</p>
                  <p>扫一扫登录</p>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
          <div
            class="area-select-list"
            v-if="tabKey == '2' && isShowAreaCode == true"
            @mouseleave="isShowAreaCode = !isShowAreaCode"
          >
            <ul>
              <li
                v-for="(item, index) in areaCode"
                :key="index"
                @click="areaClick(item)"
              >
                <span class="area-name">中国大陆</span>
                <span class="area-number">{{ item.number }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="operation-content" v-if="tabKey !== '3'">
          <div class="operation" v-if="tabKey === '1'">
            <a-checkbox> 记住密码</a-checkbox>
            <span>忘记密码 ?</span>
          </div>
          <div class="login-btn" @click="handleSubmit">登录</div>
        </div>
      </div>
      <div class="footer">
        <p>安徽商信政通信息技术股份有限公司</p>
        <p>服务电话：400-805-2158</p>
      </div>
    </div>
  </div>
</template>
<script>
import { sm2 } from 'sm-crypto'
import { login } from '@/api/login'
import Vue from 'vue'
export default {
  data() {
    return {
      loginName: '',
      password: '',
      tabKey: '1',
      isShowAreaCode: false,
      areaNumber: '+86',
      areaCode: [
        {
          number: '+86'
        },
        {
          number: '+865'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    areaClick(item) {
      this.areaNumber = item.number
      this.isShowAreaCode = false
    },
    callback(key) {},
    crypto() {
      //国密算法生成秘钥
      let keypair = sm2.generateKeyPairHex()
      let publicKey = keypair.publicKey // 公钥
      let privateKey = keypair.privateKey // 私钥
      Vue.prototype.privateKey = privateKey
      Vue.prototype.publicKey = publicKey
      localStorage.setItem('myprivateKey', privateKey)
      localStorage.setItem('mypublicKey', publicKey)
    },
    handleSubmit() {
      if (this.loginName === '' || this.password === '') {
        this.$message.warning('请输入用户名及密码')
        return false
      } else {
        //this.login(this.loginName, this.password)
        localStorage.setItem('TOKEN', 'xxxxxxx')
        this.$router.push('/console/home')
      }
    },
    //设置cookie
    setCookie(name, value, seconds) {
      seconds = seconds || 0 //seconds有值就直接赋值，没有为0
      var expires = ''
      if (seconds != 0) {
        //设置cookie生存时间
        var date = new Date()
        date.setTime(date.getTime() + seconds * 1000)
        expires = '; expires=' + date.toGMTString()
      }
      document.cookie = name + '=' + escape(value) + expires + '; path=/' //转码并赋值
    },
    login(userName, password) {
      login({ loginName: userName, password: password, publicKey: '' })
        .then((res) => {
          localStorage.setItem('TOKEN', res.data.data.token)
          this.setCookie('TOKEN', res.data.data.token) //存储localStorage的同时，也存储一个cookie来监听
          localStorage.setItem('refreshToken', res.data.data.refreshToken)
          sessionStorage.setItem('openKeys', '')
          sessionStorage.setItem('defaultSelectedKeys', '')
          localStorage.setItem('userInfo', JSON.stringify(res.data.data))
          this.$router.push('/console/home')
        })
        .catch((err) => {
          this.$message.destroy()
          this.$message.error(err)
        })
        .finally(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.login-content {
  height: 100%;
  position: relative;
}
#banner-content {
  width: 100%;
  height: 100%;
  background: #979eac;
  .item {
    height: 100%;
    width: 100%;
    background: #fff none no-repeat center center;
    background-size: cover;
  }
  .item1 {
    background: url('../../assets/images/login/banner.jpg') no-repeat center
      center;
    background-size: cover;
  }
  .item2 {
    background: url('../../assets/images/login/banner2.jpg') no-repeat center
      center;
    background-size: cover;
  }
}
.logo {
  position: absolute;
  left: 27px;
  top: 35px;
}
.login-div {
  height: 100%;
  width: 490px;
  padding: 33px 60px 45px 60px;
  box-sizing: border-box;
  position: absolute;
  background: url('../../assets/images/login/login-bg.png') no-repeat center
    center;
  background-size: cover;
  right: 0;
  top: 0;
  z-index: 999;
}
.login-tilte {
  color: #fff;
  text-align: center;
  img {
    margin-bottom: 10px;
  }
  h2 {
    font-size: 30px;
    color: #fff;
  }
}
.login-from-content {
  margin-top: 10%;
}
.footer {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 30px;
  left: 0;
}
/deep/ .ant-carousel {
  height: 100%;
}
/deep/ .slick-slider {
  height: 100%;
}
/deep/ .slick-list {
  height: 100%;
}
/deep/ .slick-track {
  height: 100%;
}
/deep/ .slick-slide {
  height: 100%;
  overflow: hidden;
}
/deep/ .slick-slide > div {
  height: 100%;
}
//tab样式修改
/deep/ .ant-tabs-nav-container-scrolling {
  padding: 0;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  margin-right: 65px;
  padding: 8px 0px;
}
/deep/ .ant-tabs-bar {
  border: none;
  margin-bottom: 30px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  color: #fff;
  font-size: 16px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  color: #fff;
}
/deep/ .ant-tabs-nav {
  width: 100%;
}
/deep/ .ant-tabs-ink-bar {
  background: url('../../assets/images/login/tab-bg.png') no-repeat center;
  background-size: cover;
  height: 8px;
}
/deep/ .ant-tabs-tab-arrow-show {
  display: none;
}
// 圆点动画
.dot {
  width: 8px;
  height: 8px;
  background: #94d5ff;
  border-radius: 50%;
  background-color: #94d5ff;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dot:before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgb(17, 161, 255);
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 1000ms;
  transition: 0.5s all ease;
  transform: scale(1);
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
  75% {
    transform: scale(3.5);
  }

  78%,
  100% {
    opacity: 0;
  }
}
.word-desc {
  position: absolute;
  left: 30%;
  top: 50%;
  cursor: pointer;
}
.word-desc:hover .desc {
  display: block;
}
.desc {
  width: 373px;
  padding: 20px 0;
  color: #ffffff;
  font-size: 16px;
  background: url('../../assets/images/login/tip-bg.png');
  background-size: 100% 100%;
  padding-left: 30px;
  padding-right: 10px;
  box-sizing: border-box;
  position: absolute;
  left: 25px;
  top: -16px;
  display: block;
}
// 登录输入框
.login-form-item {
  margin-bottom: 30px;
  height: 53px;
  line-height: 53px;
  border-radius: 5px;
  width: 100%;
  position: relative;
  label {
    width: 53px;
    height: 53px;
    display: block;
    position: absolute;
    cursor: pointer;
    line-height: 53px;
    text-align: center;
    color: #979eac;
    i {
      font-size: 25px;
    }
  }
  .suncnui-input {
    padding-left: 53px;
    padding-right: 10px;
    background: rgba(16, 26, 49, 0.5);
    width: 100%;
    line-height: 53px;
    height: 53px;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    display: inline-block;
  }
  // 验证码
  .verification-code {
    width: 30%;
    margin-left: 2%;
    display: inline-block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    background: rgba(66, 144, 246, 0.5);
    cursor: pointer;
  }
  //手机号
  .area-code {
    width: 65px;
    height: 53px;
    font-size: 16px;
    line-height: 53px;
    color: #ffffff;
    position: absolute;
    left: 53px;
    top: 0;
    cursor: pointer;
    i {
      font-size: 14px;
    }
  }
}
.login-tab {
  position: relative;
}
.area-select-list {
  position: absolute;
  left: 0;
  top: 128px;
  width: 100%;
  background: #11234d;
  color: #ffffff;
  font-size: 16px;
  padding: 20px 0;
  box-sizing: border-box;
  z-index: 999;
  border-radius: 5px;
  height: 215px;
  li {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 53px;
  }
  li:hover {
    background: #0b1d48;
  }
}
.operation {
  padding: 0 5px;
  box-sizing: border-box;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span,
  a {
    color: #ffffff;
    font-size: 14px;
  }
}
/deep/ .ant-checkbox + span {
  color: #fff;
}
.login-btn {
  height: 53px;
  color: #ffffff;
  font-size: 21px;
  line-height: 53px;
  text-align: center;
  background: url('../../assets/images/login/btn-bg.png') no-repeat center;
  background-size: 100% 100%;
  cursor: pointer;
}
.login-btn:hover {
  background: url('../../assets/images/login/btn-active.png') no-repeat center;
  background-size: 100% 100%;
}
.dimensional-code {
  text-align: center;
  img {
    display: inline-block;
    width: 216px;
    height: 216px;
    margin-bottom: 35px;
  }
}
.dimensional-tip {
  text-align: center;
  i {
    font-size: 30px;
    color: #ffffff;
    vertical-align: middle;
  }
  .tip {
    font-size: 16px;
    color: #ffffff;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-align: left;
  }
}
</style>
